<template>
	<view>

		<u-cell-group>
			<u-cell-item :arrow="false">
				<view slot="title">青少年模式：</view>
				<u-switch v-model="config.R18" @change="r18Change"></u-switch>
			</u-cell-item>
		</u-cell-group>
		<u-form ref="uForm" label-width="100px" class="u-p-10">
			<u-form-item label="关键字：">
				<u-input v-model="model.keyword" border placeholder="输入关键字" />
				<view slot="right" style="margin:0px 10px;">
					<u-button size="mini" type="success" plain shape="circle" @click="handleSave">保存</u-button>
				</view>
			</u-form-item>
		</u-form>
		<view class="key-item">
			<u-tag :text="item" type="success" v-for="(item,index) in list" :key="index"
				@click="handleCheckItem(item,index)" />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					R18: false
				},
				model: {
					keyword: ''
				},
				list: []
			}
		},
		created() {
			this.getSettingConfig()
		},
		methods: {
			async r18Change(e) {
				this.$u.vuex("settings.R18", e)
			},
			async getSettingConfig() {
				this.config.R18 = this.settings.R18
				this.list = this.settings.r18Keywords
			},
			async handleSave() {
				let rows = this.list.find(t => t == this.model.keyword)
				if (rows) {
					this.$u.toast(`关键字 [${this.model.keyword}] 已存在`)
					return
				}
				if (!this.model.keyword.trim()) {
					this.$u.toast(`关键字不能为空`)
					return
				}
				this.list.push(this.model.keyword)
				this.$u.vuex("settings.r18Keywords", this.list)
				this.$u.toast(`关键字 [${this.model.keyword}] 保存成功`)
				this.model.keyword = ''
			},
			async handleCheckItem(obj, index) {
				uni.showModal({
					title: '移除',
					content: '确定该移除关键字？',
					success: (res) => {
						if (res.cancel) {
							return
						}
						let list = [...this.list]
						list.splice(index, 1)
						this.$u.vuex("settings.r18Keywords", list)
						this.list = list
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.key-item {
		display: flex;
		flex-wrap: wrap;

		.u-tag {
			margin: 5px;
		}
	}
</style>